<template>
  <div id="ppp">
    <p id="top">
      <span @click="prev()">&lt;</span>
      <span class="title">新用户注册</span>
    </p>
    <hr />
    <div class="bottom">
      <div class="big" id="phone">
        <span>请输入电话：</span>
        <input type="text" placeholder="phone" v-model="phone" id="phone"/>
      </div>
      <div class="big" id="phone">
        <span>请输入邮箱：</span>
        <input type="text" placeholder="email" v-model="email" />
      </div>
      <div class="big" id="phone">
        <span>请输入密码:</span>
        <input type="text" placeholder="password" v-model="password" />
      </div>
      <div class="big" id="phone">
        <span>请确认密码:</span>
        <input type="text" placeholder="请确认密码" v-model="password2" />
      </div>
      <div class="big" id="phone">
        <span>验证码</span>
        <div class="send">
          <input type="text" placeholder="验证码" v-model="code" class="olo"/>
          <span id="to" @click="funb()">发送</span>
        </div>
       
      </div>
      <div class="reg">
      <button id="zhuce" @click="fun()">注册</button>
        
      </div>
      <span id="yz" @click="func()">{{ this.yz }}</span>
    </div>
  </div>
</template>
<script>
import { postlink } from "a/postlink.js";
import { getlink } from "a/getlink.js";
export default {
  data() {
    return {
      phone:"",
      email:"", //string
      password:"", //string
      password2:"", //string
      code:"",
      yz:"",
      blurrr:"",
    };
  },

  methods: {
    prev() {
      this.$router.go("-1");
    },
    funblur() {
      let phone = document.getElementById("phone");
      this.blurrr = phone.value;
      console.log(typeof this.blurrr);
    },

    // 点击注册调
    fun() {
      console.log(this.code)

      let usp={
        userid: this.phone,
        password: this.password,
        password2: this.password,
        email: this.email,
        code:this.code
      };
      postlink("http://180.76.121.47:8008/regist",usp).then((ok) => {
        console.log(ok);
        this.yz = ok.data.msg;
         setTimeout(() => {
             //这个定时器放在访问后端函数执行成功后来进行3秒后的跳转
        console.log("跳转登录");
    this.$router.push("/DAccountLogin");
      
      }, 3000);
      }); 
    },
    //点击发验证码
    funb() {
      getlink(`http://180.76.121.47:8008/code/${this.email}`).then((ok) => {
        console.log(ok.data);
        this.yz = ok.data.msg;
      });
    },
    func() {},
  },
};
</script>

<style scoped>
#ppp {
  box-sizing: border-box;
  padding: 0rem 0.2rem 0rem 0.2rem;
}
div {
  font-size: 0.3rem;
  box-sizing: border-box;
  margin-top: 0.3rem;
}
#top {
  height: 0.3rem;
  line-height: 0.1rem;
  box-sizing: border-box;
  font-size: 0.22rem;
}
#top .title{
  margin-left: 1.05rem;
  font-size: 0.2rem;
}

.big span {
  line-height: 0.5rem;
}
.big {
  width: 98%;
  display: flex;
  justify-content: space-between;
  height: 0.42rem;
  font-size: 0.16rem;
}
input {
  border-style: none;
  width: 70%;
  border-radius: 0.1rem;
  background-color: #f2f2f2;
}
#yz {
  display: block;
  text-align: center;
  width: 100%;
  line-height: 0.42rem;
  height: 0.42rem;
  font-size: 0.1rem;
  color: red;
}
.bottom {
  margin-top: 0.2rem;
}
#phone input {
  width: 70%;
  height: 0.42rem;
  padding-left: 0.08rem;
  box-sizing: border-box;
}
#phone {
  line-height: 0.3rem;
}


#phone .olo {
  width: 70%;
  font-size: 0.16rem;
  border-radius: 0;
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.bottom {
  margin-bottom: 0.5rem;
}
.big #to {
  font-size: 0.17rem;
  line-height: 0.4rem;
  display: block;
  width: 30%;
  height: 0.4rem;
  background-color: gray;
  color: #fff;
  text-align: center;
  border-radius: 0.04rem;

}
.send{
  width: 70%;
  display: flex;
  margin-top: 0;
}
button{
  display: inline-block;
  width: 90%;
  color: #fff;
  background-color: #e15141;
  height: 0.42rem;
  line-height: 0.42rem;
  font-size: 0.16rem;
  border: none;
  border-radius: 0.05rem;
}
.reg{
 text-align: center;

}
</style>
